.layadmin-pagetabs {
	// .switchSkin (@skinName)
	// border:1px solid #f00;
	--tw-bg-opacity: 1;
	background-color: hsla(var(--b1) / 0.5);
	border-bottom: 1px solid ;
	border-color:hsla(var(--bc) / 0.2);
	z-index: auto;
	// border-color: hsla(var(--b1)/0.2);
	.layadmin-tabs-control {
		--tw-bg-opacity: 0.1;
		border-color: hsla(var(--bc) / var(--tw-bg-opacity));
		&:hover {
			background-color: hsla(var(--bc) / 0.1);
		}
	}
	.layui-tab-title {
		li {
			border-right: 1px solid hsla(var(--bc) / 0.2);
            .layui-tab-close{
                &:hover{
                    --tw-text-opacity: 1;
                    background-color: hsl(var(--p) / var(--tw-bg-opacity));
                    color: hsl(var(--pc)/var(--tw-text-opacity));
                }
            }
			&:hover {
				background-color: hsla(var(--bc) / 0.1);
				&::after {
					background-color: hsl(var(--p) / var(--tw-bg-opacity));
				}
			}
			&.layui-this {
				// background: #f00;
				--tw-bg-opacity: 1;
				background-color: hsla(var(--bc) / 0.1);
				border-right: 1px solid hsla(var(--bc) / 0.2);
				// color: hsl(var(--pc));
				color: hsla(var(--bc) / var(--tw-text-opacity, 1)) !important;
				// i {
				// 	// color: hsl(var(--pc));
				// 	color: hsla(var(--bc) / var(--tw-text-opacity, 1)) !important;
				// }
				&::after {
					background-color: hsl(var(--p) / var(--tw-bg-opacity));
				}
			}
			.layui-tab-close{
				color: hsla(var(--bc) / .8);
			}
		}
	}
	.layadmin-tabs-select {
		.layui-nav-child {
			background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
			--tw-bg-opacity: 1;
			border: 1px solid;
            border-color: hsla(var(--bc) / 0.2);
			// border-color: hsla(var(--bc) / var(--tw-bg-opacity, 0.2));
            a{
                color: hsla(var(--bc) / var(--tw-text-opacity, 1));
                &:hover {
                    // background: #f00;
                    background-color: hsl(var(--bc) / var(--tw-bg-opacity));
                    --tw-bg-opacity: 0.1;
                }
            }
		}
	}
}

.switchSkin (@a)when (@a="dark") {
	background: @pagetabs-bg;

	.layui-icon-prev {
		border-right: @pagetabs-dot-line;
	}

	.layadmin-tabs-control {
		color: @pagetabs-text-color;
		border-left: @pagetabs-dot-line;

		&:hover {
			background: @pagetabs-dot-color;
		}

		.layui-nav {
			a,
			cite {
				color: #fff;
			}

			.layui-nav-child {
				// display: block;
				background: darken(@main-color, 30%);
				border: 1px solid darken(@main-color, 80%);

				dd {
					a {
						color: #fff;

						&:hover {
							background: darken(@main-color, 50%);
						}
					}
				}

				hr {
					background-color: darken(@main-color, 10%);
				}
			}
		}
	}

	.layui-tab {
		.layui-tab-title {
			li {
				border-right: @pagetabs-dot-line;

				&.layui-this {
					background: fade(@pagetabs-dot-color, 10%);
					color: @pagetabs-text-color;
				}

				&:hover {
					background: fade(@pagetabs-dot-color, 10%);
					color: @pagetabs-text-color;
				}

				&:after {
					background-color: @pagetabs-dot-color;
					top: auto;
					bottom: 0;
				}
			}
		}
	}
}
